/**
 * 创建左侧悬浮精灵 指向箭头
 *
 * @returns { Object3D }
 */
export default function mixinTimeArrow (Incident) {
  Incident.prototype.createTimeArrow = function createTimeArrow () {
    // 创建基础材质
    var lineMaterial = new THREE.LineBasicMaterial({ color: 0xCCCCCC, fog: true });
    // 创建几何体
    var upArrowGeo = new THREE.Geometry();
    // 创建三角形定点
    upArrowGeo.vertices.push(new THREE.Vector3(-1, 1, -1));
    upArrowGeo.vertices.push(new THREE.Vector3(0, 0, 0));
    upArrowGeo.vertices.push(new THREE.Vector3(1, -1, -1));

    var downArrowGeo = new THREE.Geometry();
    downArrowGeo.vertices.push(new THREE.Vector3(-1, 1, 1));
    downArrowGeo.vertices.push(new THREE.Vector3(0, 0, 0));
    downArrowGeo.vertices.push(new THREE.Vector3(1, -1, 1));

    var arrowLineGeo = new THREE.Geometry();
    arrowLineGeo.vertices.push(new THREE.Vector3(0,0,0));
    arrowLineGeo.vertices.push(new THREE.Vector3(0,0,1));

    var arrowLineSeparatorGeo = new THREE.Geometry();
    arrowLineSeparatorGeo.vertices.push(new THREE.Vector3(0,0,0));
    arrowLineSeparatorGeo.vertices.push(new THREE.Vector3(1,0,0));

    // 上下分离器
    var upSeparator = new THREE.Line(arrowLineSeparatorGeo, lineMaterial);
    var downSeparator = new THREE.Line(arrowLineSeparatorGeo, lineMaterial);

    // 上下箭头
    var upArrow = new THREE.Line(upArrowGeo, lineMaterial);
    var downArrow = new THREE.Line(downArrowGeo, lineMaterial);

    // 上下箭头
    var upArrowLine = new THREE.Line(arrowLineGeo, lineMaterial);
    var downArrowLine = new THREE.Line(arrowLineGeo, lineMaterial);

    var textCanvas = document.createElement('canvas');
    textCanvas.width = 128;
    textCanvas.height = 32;

    var ctx = textCanvas.getContext('2d');
    ctx.font = '30px Lato, Arial';
    ctx.fillStyle = '#FFFFFF';
    var textWidth = ctx.measureText("TIME").width;
    ctx.fillText("TIME", (textCanvas.width - textWidth) / 2, 28);

    var tex = new THREE.Texture(textCanvas);
    tex.needsUpdate = true;

    var mat = this.canvasShaderMaterial.clone();
    var color = new THREE.Color(0xCCCCCC);
    mat.uniforms = {
      map: {type: 't', value: tex},
      color: {type: 'v3', value: new THREE.Vector3(color.r, color.g, color.b)}
    };

    var text = new THREE.Mesh( new THREE.PlaneBufferGeometry(textCanvas.width/25, textCanvas.height/25), mat );
    text.position.set(64/25, 16/25, 0);
    text.rotation.x = -0.4;

    upSeparator.position.y = 16/25 - 16/25 * Math.cos(text.rotation.x);
    upSeparator.position.z = - 16/25 * Math.sin(text.rotation.x);
    downSeparator.position.y = 16/25 + 16/25 * Math.cos(text.rotation.x);
    downSeparator.position.z = + 16/25 * Math.sin(text.rotation.x);

    upSeparator.scale.set(128/25, 1, 1);
    downSeparator.scale.set(128/25, 1, 1);

    upArrowLine.position.set(64/25, upSeparator.position.y, upSeparator.position.z);
    upArrowLine.scale.set(1, 1, 20);
    downArrowLine.position.set(64/25, downSeparator.position.y, downSeparator.position.z);
    downArrowLine.scale.set(1, 1, -20);

    upArrow.position.copy(upArrowLine.position);
    upArrow.position.z += upArrowLine.scale.z;

    downArrow.position.copy(downArrowLine.position);
    downArrow.position.z += downArrowLine.scale.z;


    var timeLane = new THREE.Object3D();

    timeLane.position.set(-35, -5, 0);
    timeLane.zOffset = -60;

    timeLane.add(text);
    timeLane.add(upSeparator);
    timeLane.add(downSeparator);

    timeLane.add(upArrow);
    timeLane.add(upArrowLine);

    timeLane.add(downArrow);
    timeLane.add(downArrowLine);

    return timeLane;
  }
}



